دسته بندی ها

08:10 1402/04/30

تنظیم عرض width ستون های جدول در پلاگین datatables.net

با سلام و عرض وقت بخیر

ببخشید من از جدول در پروژه ام استفاده نمودم عرض جدول را در تگ <table> بر حسب درصد وارد نمودم و عرض ستون ها را همین طور مشخص کردم در جداولی که ستون های کم دارد مشکل ندارد منتها در مواردی که ستون ها جدول زیاد باشد عرض ستون ها آن گونه نمی شود که تعریف شده است . بجای % از px هم استفاده کردم که این هم مثل همان بوده. و جدولی بوجود آمد به عرضی بیش از عرض صفحه، که از ظاهر و خوانایی پروژه کاسته است.

قسمتی از کد هم به این صورت است.

<table id="tbltimesheet" class="table table-striped table-bordered dt-responsive nowrap" style="border-radius: 2px; box-shadow: 3px 3px 1px 0 #4b9d11; border-color: #43a10f; width:100% !important" dir="rtl">
        <thead style="background-color: #bdeea2; color: #2e6806; font-weight: bold; border: 1px groove #389007;">
      <tr style=" border: 1px groove #389007; color: #389007;font-size:12px;">
                
      <td style="width:10%; text-align: center; border: 1px solid #389007 "> تاریخ</td>
      <td style="width: 10%; text-align: center; border: 1px solid #389007 ">شیفت</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">نوع حضور</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">ورود</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">خروج</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">تاخیر</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">تعجیل</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">اضافه کار</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">ورود اولیه</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">خروج اولیه</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007 ">تعداد حضور</td>
      <td style="width: 3%; text-align: center; border: 1px solid #389007">عملیات </td>
      <td style="width: 50%; text-align: center; border: 1px solid #389007"> تاییدیه ها</td>
      </tr>
      </thead>

در ضمن از پلاگین datatables استفاده نمودم.

از پاسخگویی شما سپاس گزارم

ویرایش شده در جمعه 30 تیر 1402 ساعت 10:57:26

مشخصات سوال کننده :

کاربر : ahmadikia امتیاز کاربر : 13 رتبه کاربر : 55

دسته بندی : Asp.net Core جاوا اسکریپت

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 1284

هوش مصنوعی

پاسخ هوش مصنوعی

برای تنظیم عرض ستون های جدول در پلاگین datatables.net، می توانید از گزینه های موجود در تنظیمات DataTables استفاده کنید. یکی از راه های معمول برای این کار، استفاده از ویژگی `columnDefs` یا `columns` است که به شما امکان می دهد عرض ستون ها را به صورت دقیق تنظیم کنید.

در اینجا یک نمونه کد برای تنظیم عرض ستون ها با استفاده از JavaScript و DataTables آورده شده است:


$(document).ready(function() {
    $('#tbltimesheet').DataTable({
        columnDefs: [
            { width: '10%', targets: 0 }, // تاریخ
            { width: '10%', targets: 1 }, // شیفت
            { width: '3%', targets: 2 }, // نوع حضور
            { width: '3%', targets: 3 }, // ورود
            { width: '3%', targets: 4 }, // خروج
            { width: '3%', targets: 5 }, // تاخیر
            { width: '3%', targets: 6 }, // تعجیل
            { width: '3%', targets: 7 }, // اضافه کار
            { width: '3%', targets: 8 }, // ورود اولیه
            { width: '3%', targets: 9 }, // خروج اولیه
            { width: '3%', targets: 10 }, // تعداد حضور
            { width: '3%', targets: 11 }, // عملیات
            { width: '50%', targets: 12 }  // تاییدیه ها
        ],
        autoWidth: false // این گزینه را فعال کنید تا عرضها به درستی تنظیم شوند 
    });
});

توجه داشته باشید که استفاده از `autoWidth: false` به DataTables اجازه می دهد تا از عرضهای مشخص شده شما پیروی کند و همچنین می توانید از درصد یا پیکسل برای عرض ستون ها استفاده کنید. با این تنظیمات، جدول شما باید به درستی در عرض صفحه قرار گیرد و از ایجاد مشکلات در خوانایی جلوگیری شود.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : fateme 11:05 1402/04/30

وقتی شما از پلاگین datatables.net استفاده می کنید برای تغییر اندازه ستون ها نمی تونید مثل حالت عادی کار کنید. برای تغییر اندازه ستون در پلاگین datatables لینک زیر رو مطالعه کنید:

datatables Columns width

به مثال زیر توجه کنید :

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

در مثال بالا عرض ستون اول (target:0) رو برابر 20% قرار دادیم.

ویرایش شده در جمعه 30 تیر 1402 ساعت 11:05:57

به این پاسخ امتیاز بدهید 2

امتیاز: 1637 رتبه: 2

نظر ویرایش گزارش

2 نظر

ahmadikia : عالی بود بی نهایت از لطف و پاسخگویی شما سپاس گزارم

امتیاز کاربر : 13 رتبه کاربر : 55 تاریخ ثبت : 11:52 1402/04/30

حذف

ahmadikia : مجدد سپاس گزارم انجام شد منتها منو سرچ و صفحه بندی نمایش داده نمی شود البته اسکریپت را به این صورت نوشتم <script> $(document).ready(function () { $('#tbltimesheet').DataTable({ "language": { "url": "\\assets\\js\\scripts\\datatables\\fa.json" }, "columnDefs": [ { "width": "2%", "targets": 0 } { "width": "3%", "targets": 1 } { "width": "9%", "targets":8 } ] }); }); </script>

امتیاز کاربر : 13 رتبه کاربر : 55 تاریخ ثبت : 06:24 1402/04/30

حذف

پاسخ دهنده : saedbfd 13:47 1402/04/31

تغییر ستون در پلاگین datatables از طریق دستورات جاوااسکریپت قابل انجام هست. لینک زیر رو نگاه کنید یک مثال کامل رو برای تغییر اندازه ستون ها براتون قرار داده.

Assigned column width

با این حال براتون یک مثال خیلی ساده توسط ویژوال استودیو حاضر کردم و سورسش رو میذارم. شما فقط کافیه این پروژه رو Run کنید و مشاهده کنید خروجی رو. کدهای زیر رو دقت کنید.

<script>
        $(document).ready(function () {
            $('#example').DataTable({
                "columns": [
                    { "width": "20%" },
                    { "width": "10%" },
                    { "width": "40%" },
                    { "width": "25%" }, 
                    { "width": "5%" }
                ]
            });
        });
</script>

در مثال بالا یک datatable داریم با 5 تا ستون. توسط درصد مشخص کردیم هر ستون چقدر باید فضا اشغال کنه. خروجی مشابه زیر خواهد بود :

تغییر اندازه ستون در پلاگین datatables

برای دانلود سورس کامل کلیک کنید.

به این پاسخ امتیاز بدهید 1

امتیاز: 1664 رتبه: 1

نظر ویرایش گزارش

1 نظر

ahmadikia : بسیار بسیار بسیار عالی بی نهایت سپاس گزارم

امتیاز کاربر : 13 رتبه کاربر : 55 تاریخ ثبت : 03:35 1402/05/01

حذف

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

تنظیم عرض width ستون های جدول در پلاگین datatables.net

پاسخ هوش مصنوعی

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین